<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="../common/common.css">
		<link rel="stylesheet" href="qrcode.css">

		<script src="lib/kjua-svg-1.10.0.min.js" charset="utf-8"></script>

		<script async type="module" src="/common/modules/Logger/OverwriteConsoleLog.js"></script>
		<script defer src="../common/common.js" type="module" charset="utf-8"></script>
		<script defer src="qrcode.js" type="module" charset="utf-8"></script>
	</head>
	<body class="center-container">
		<div id="topMessageContainer" class="message-container center-container">
			<div id="messageTips" aria-label="info message" data-i18n data-i18n-aria-label="__MSG_ariaMessageInfo__" class="message-box info invisible fade-hide">
				<span class="message-text"></span>
				<a href="#">
					<button type="button" class="message-action-button micro-button info invisible"></button>
				</a>
				<img class="icon-dismiss invisible" src="/common/img/close.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
			</div>
		</div>
		<div id="qrcode-container" class="center-container">
			<div id="qrcode-resize-container">
				<div id="qrcode" class="qrcode invisible">
					<img src="" width="200" height="200"></img>
				</div>
				<img id="qrcode-placeholder" class="qrcode" src="img/qr-grey.svg" alt="QR code placeholder image"
					width="200"
					height="200"
					data-i18n
					data-i18n-alt="__MSG_qrCodePlaceholder__">
				<div class="message-container center-container">
					<div id="messageInfo" aria-label="info message" data-i18n data-i18n-aria-label="__MSG_ariaMessageInfo__" class="message-box info float-qr float-qr-bottom invisible fade-hide">
						<span class="message-text"></span>
						<img class="icon-dismiss invisible" src="/common/img/close.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
					</div>
					<div id="messageError" aria-label="error message" data-i18n data-i18n-aria-label="__MSG_ariaMessageError__" class="message-box error float-qr float-qr-bottom invisible fade-hide">
						<span class="message-text" data-i18n="__MSG_couldNotGenerateQrCode__">Could not generate QR code.</span>
						<img class="icon-dismiss invisible" src="/common/img/close-white.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
					</div>
					<div id="messageLoading" aria-label="loading message" data-i18n data-i18n-aria-label="__MSG_ariaMessageLoading__" class="message-box info float-qr float-qr-bottom">
						<span class="message-text" data-i18n="__MSG_loading__">Loading…</span>
					</div>
				</div>
			</div>
		</div>
		<textarea id="qrcodetext"
					class="browser-style"
					placeholder="Enter text for QR code here to generate it."
					autofocus="true"
					data-i18n
					data-i18n-placeholder="__MSG_textareaPlaceholder__"></textarea>
	</body>
</html>
